<template>
    <div ref="MapView" style="height:100%">
        <div class="control">
            ---------------------------------------------
            <br>
            俯仰角 ： (起：{{value2[1] + '°，止：' + value2[0]}}°)<Slider v-model="value2" range :min="-90" :max="90"></Slider>
            <br>
            方位角 ： (起：{{Value3[0] + '°，止：' + Value3[1]}}°)<Slider v-model="Value3" range :min="-360" :max="360"></Slider>
            <br>
            雷达罩半径：({{radius}}米) <Slider v-model="radius" :min="0" :max="1000000"></Slider>
            <br>
            面颜色：
            <ColorPicker v-model="Color" alpha />&nbsp;<br><br>
            <br>
            线颜色：
            <ColorPicker v-model="lineColor" alpha />&nbsp;<br><br>
            <br>
            渲染精度：(每隔 {{slice}}° 渲染一次)<Slider v-model="slice" :min="5" :step="5" :max="60"></Slider>

        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap';
var map = null;
var mapConfig = [{ "type": "TD", "name": "天地图", "layerType": "background", "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", "default": false }]
const randomNum = (min, max) => parseFloat(Math.random() * (max - min + 1) + min, 10);


export default {
    data() {
        return {
            radius: 1000000,
            SenceMode: '3D',
            value2: [-20, 20],
            Value3: [0, 100],
            Color: 'rgba(0,0,255,0.3)',
            lineColor: 'rgba(0,0,255,1)',
            slice: 15,
        }
    },
    watch: { SenceMode(val) { map.SenceMode = val; } },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                animation: false, // 关闭默认动画事件
                senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        map.flytochina();
        const viewer = map.getViewer();

        const scene = viewer.scene;

        let l = Cesium.Cartesian3.fromDegrees(117.224, 31.819, 1200000);
        let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0));

        var _Entity = viewer.entities.add({
            position: l,
            orientation: Cesium.Transforms.headingPitchRollQuaternion(l, r),
            point: {
                show: true, //是否展示
                pixelSize: 4, //点的大小
                color: Cesium.Color.YELLOW, //颜色
                outline: true,
                outlineWidth: 1,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
            radarSensor: new Cesium.RadarSensorGraphics({
                radius: new Cesium.CallbackProperty(() => {
                    return this.radius
                }, false),
                color: new Cesium.CallbackProperty(() => {
                    return this.rgba2Color(this.Color)
                }, false),
                lineColor: new Cesium.CallbackProperty(() => {
                    return this.rgba2Color(this.lineColor)
                }, false),
                AzimuthFrom: new Cesium.CallbackProperty(() => {
                    return this.Value3[0]
                }, false),
                AzimuthTo: new Cesium.CallbackProperty(() => {
                    return this.Value3[1]
                }, false),
                ElevationFrom: new Cesium.CallbackProperty(() => {
                    return this.value2[1]
                }, false),
                ElevationTo: new Cesium.CallbackProperty(() => {
                    return this.value2[0]
                }, false),
                slice: new Cesium.CallbackProperty(() => {
                    return this.slice
                }, false),
            })
        });

        console.log(_Entity);

    },
    methods: {
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g;
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
</style>